<template>
  <div>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <a-card :bordered="false">
          <a-descriptions title="服务器信息">
            <a-descriptions-item label="服务器名称">小白的PC</a-descriptions-item>
            <a-descriptions-item label="操作系统">Windows 10</a-descriptions-item>
            <a-descriptions-item label="系统架构">ARM 64</a-descriptions-item>
            <a-descriptions-item label="服务器IP">192.168.0.202</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <a-card :bordered="false">
          <a-descriptions title="Java环境信息">
            <a-descriptions-item label="版本">Java HotSpot(TM) 64-Bit Server VM</a-descriptions-item>
            <a-descriptions-item label="安装路径">/usr/java/jdk1.8.0_111/jre</a-descriptions-item>
            <a-descriptions-item label="项目路径">/home/ruoyi/projects/ruoyi-vue</a-descriptions-item>
            <a-descriptions-item label="启动时间">2020-06-13 23:10:33</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
    </a-row>

    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="!isMobile && 'desktop'">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="服务器信息" :style="{ height: '100%' }">
            <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
              <a class="ant-dropdown-link" href="#">
                <a-icon type="ellipsis"/>
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;">操作一</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">操作二</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
            <a-row :gutter="68">
            </a-row>
            <div class="ant-table-wrapper">
              <a-table
                row-key="index"
                size="small"
                :columns="searchTableColumns"
                :dataSource="searchData"
                :pagination="{ pageSize: 5 }"
              >
                <span slot="range" slot-scope="text, record">
                  <trend :flag="record.status === 0 ? 'up' : 'down'">
                    {{ text }}%
                  </trend>
                </span>
              </a-table>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { Bar, ChartCard, MiniArea, MiniBar, MiniProgress, MiniSmoothArea, RankList, Trend } from '@/components'
import { baseMixin } from '@/store/app-mixin'

const barData = []
const barData2 = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${ i + 1 }月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
  barData2.push({
    x: `${ i + 1 }月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const searchUserData = []
for (let i = 0; i < 7; i++) {
  searchUserData.push({
    x: moment().add(i, 'days').format('YYYY-MM-DD'),
    y: Math.ceil(Math.random() * 10)
  })
}
const searchUserScale = [
  {
    dataKey: 'x',
    alias: '时间'
  },
  {
    dataKey: 'y',
    alias: '用户数',
    min: 0,
    max: 10
  }]

const searchTableColumns = [
  {
    dataIndex: 'index',
    title: '排名',
    width: 90
  },
  {
    dataIndex: 'keyword',
    title: '搜索关键词'
  },
  {
    dataIndex: 'count',
    title: '用户数'
  },
  {
    dataIndex: 'range',
    title: '周涨幅',
    align: 'right',
    sorter: (a, b) => a.range - b.range,
    scopedSlots: { customRender: 'range' }
  }
]
const searchData = []
for (let i = 0; i < 50; i += 1) {
  searchData.push({
    index: i + 1,
    keyword: `搜索关键词-${ i }`,
    count: Math.floor(Math.random() * 1000),
    range: Math.floor(Math.random() * 100),
    status: Math.floor((Math.random() * 10) % 2)
  })
}

const DataSet = require('@antv/data-set')

const sourceData = [
  { item: '家用电器', count: 32.2 },
  { item: '食用酒水', count: 21 },
  { item: '个护健康', count: 17 },
  { item: '服饰箱包', count: 13 },
  { item: '母婴产品', count: 9 },
  { item: '其他', count: 7.8 }
]

const pieScale = [{
  dataKey: 'percent',
  min: 0,
  formatter: '.0%'
}]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
})
const pieData = dv.rows

export default {
  name: 'Analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    MiniSmoothArea
  },
  data() {
    return {
      data: [
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Mathew', 'last': 'Craig' }, 'email': 'mathew.craig@example.com', 'nat': 'IE' },
        { 'gender': 'female', 'name': { 'title': 'Ms', 'first': 'Andrea', 'last': 'Osullivan' }, 'email': 'andrea.osullivan@example.com', 'nat': 'IE' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Mathew', 'last': 'Reed' }, 'email': 'mathew.reed@example.com', 'nat': 'IE' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Roger', 'last': 'Woods' }, 'email': 'roger.woods@example.com', 'nat': 'IE' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' }
      ],
      loading: true,
      rankList,

      // 搜索用户数
      searchUserData,
      searchUserScale,
      searchTableColumns,
      searchData,

      barData,
      barData2,

      //
      pieScale,
      pieData,
      sourceData,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      }
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);

    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0, 0, 0, .45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }

  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
